<template>
  <el-card shadow="hover" style="border-radius: 10px;text-align: center;">
    <h2 style="margin-bottom:50px">个人中心</h2>
<!--    // private Integer id;-->
<!--    // private String username;-->
<!--    // private String password;-->
<!--    // private boolean level;-->
<!--    // private String email;-->
<!--    // private String image;-->
<!--    // private String qq;-->
<!--    // private String wechat;-->
<!--    // private String bilibili;-->
<!--    // private String cloud_music;-->
<!--    // private String music;-->
<!--    // private String git;-->
    <div class="mid">
<!--      头像-->
      <div class="block"><el-avatar :size="200" :src="user.image" class="image" @click="updateClick"></el-avatar></div>
      <input type="file" ref="imageUser" style="display: none" @change="updateImage">
      <p><span>头像URL</span><el-input v-model="user.image" placeholder="头像地址"></el-input></p>
      <el-divider></el-divider>
<!--      用户名-->
      <p><span>用户名</span><el-input v-model="user.username" placeholder="用户名"></el-input></p>
      <el-divider></el-divider>
<!--      Email-->
      <p><span>Email</span><el-input v-model="user.email" placeholder="Email"></el-input></p>
      <el-divider></el-divider>
<!--      QQ-->
      <p><span>QQ</span><el-input v-model="user.qq" placeholder="QQ"></el-input></p>
      <el-divider></el-divider>
<!--      Wechat-->
      <p><span>微信</span><el-input v-model="user.wechat" placeholder="wechat"></el-input></p>
      <el-divider></el-divider>
<!--      bilibili-->
      <p><span>bilibili</span><el-input v-model="user.bilibili" placeholder="bilibili"></el-input></p>
      <el-divider></el-divider>
<!--      CloudMusic-->
      <p><span>网易云</span><el-input v-model="user.cloudMusic" placeholder="网易云"></el-input></p>
      <el-divider></el-divider>
<!--      CloudMusicIds-->
      <p>
        <span>网易云音乐id组</span>
        <el-input type="textarea"
                  :rows="5"
                  v-model="user.music"
                  placeholder="用于左下角音乐播放的循环列表,id可在网易云网页版对应的歌曲链接中找到,请用回车隔开每个id,且最后一行不要留空">
        </el-input>
      </p>
      <el-divider></el-divider>
<!--      level-->
      <p>
        <span>级别</span>

        <el-select v-model="user.level" placeholder="请选择" disabled>
          <el-option
              v-for="item in optionsLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

        <span class="btn" @click="offLogin">登出</span>

      </p>
      <el-divider></el-divider>

      <el-button type="info" @click="submit" plain>修改信息</el-button>

      <div>
        <el-divider></el-divider>
        <span>修改密码</span>
        <br>

        <p>
          <el-input type="password"
                    v-model="oldPassword"
                    placeholder="输入旧密码">
          </el-input>
        </p>

        <p>
          <el-input type="text"
                    v-model="newPassword"
                    placeholder="输入新密码">
          </el-input>
        </p>

        <el-button type="info" @click="changePassword" plain>修改密码</el-button>

      </div>

    </div>
  </el-card>
</template>

<script>

import {imageLoad} from "@/api/upload";
import {updateById, userGet, userPassword} from "@/api/user";

const MAX_SIZE= 1024*1024*5;//5MB
let url;
let imageInit;

export default {
  name: "indexUser",
  data(){
    return{
      user:{},
      oldPassword:null,
      newPassword:null
    }
  },
  mounted() {

    if(this.localGetObject(this.userObjectName))
      this.user=this.localGetObject(this.userObjectName);

    userGet(this.user.id).then(res=>{
      this.user=res.data.data;

      if((!this.user.music)||this.user.music.trim()==="") this.user.music=this.$store.state.musicInit.join('\n');

      this.$store.commit('musicId',this.user.music);

      this.localSetObject(this.userObjectName,this.user);

    }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

    imageInit=this.user.image;

  },
  methods:{
    updateClick(){
      this.$refs.imageUser.click();
    },
    offLogin(){
      localStorage.removeItem(this.userObjectName);
      this.$router.replace('/login');
    },
    updateImage(){
      let file = this.$refs.imageUser.files[0];
      console.log(file);
      // console.log(file.getAttribute('src'))
      if(!this.imageCheck.test(file.name)) {
        this.$notify.error(this.notifyMsgErr("请上传图片或动图!"));
        return false;
      }

      if(file.size>MAX_SIZE) {
        this.$notify.error(this.notifyMsgErr("图片大小不能超过5MB!"));
        return false;
      }

      url=URL.createObjectURL(file);

      console.log(url);

      this.user.image=url;

      return true;
    },
    submit(){
      this.$confirm('是否提交修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        URL.revokeObjectURL(url);
        if(imageInit!==this.user.image){
          let formData = new FormData();
          formData.append('file',this.$refs.imageUser.files[0]);
          imageLoad(formData).then(res=>{
            console.log(res);
            if(res.data.code==="100") this.user.image=res.data.data[0];
            else this.$notify.error(this.notifyMsgErr(res.data.msg));
          }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
        }

        console.log(this.user);

        setTimeout(()=>{
          updateById(this.user).then(res=>{

            let x = res.data;

            if(x.data==="更新失败") this.$notify.error(this.notifyMsgErr(x.data));
            else {
              this.$notify.success(this.notifyMsgSuc("更新成功!"));
              this.user=x.data;
              this.localSetObject(this.userObjectName,this.user);
              // this.$router.go(0);
            }
          }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
        },1000);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    changePassword(){

      this.$confirm('是否提交修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let form=new FormData();
        form.append('id',this.user.id);
        form.append('old',this.oldPassword);
        form.append('last',this.newPassword);


        userPassword(form).then(res=>{

          let result=res.data;
          if(result.code==="100") {
            this.$notify.success(this.notifyMsgSuc(result.data));
            this.$router.go(0);
          }
          else this.$notify.error(this.notifyMsgErr(result.msg));
        }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)))

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });

    }
  },
  beforeUnmount() {
    URL.revokeObjectURL(url);
  }
}
</script>

<style lang="less" scoped>
.mid{
  margin: 20px auto;
  width: 700px;
}
.block{
  text-align: center;
}
.image{
  &:hover{
    cursor: pointer;
    opacity: 0.8;
  }
}
p{
  margin: 10px;
  span{
    width: 30%;
    display: inline-block;
  }
}
.el-input{
  width: 70%;
}
</style>
